<template>
    <div style="width: 1380px">
        <!--搜索用户-->
        <div class="input">
            <div>
                <span>用户名:</span>
                <!--搜索输入框-->
                <el-input class="shuru" v-model="username" placeholder="请输入内容"></el-input>
                <!--搜索按钮-->
                <el-button style="margin-left: 10px" @click="search" type="primary">搜索</el-button>
            </div>
        </div>
        <!--添加用户按钮-->
        <el-button type="primary" @click="openModal">添加用户</el-button>
        <!--添加用户标题与页面-->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="userFormData">
                <!--新增用户名-->
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="userFormData.username" autocomplete="off"></el-input>
                </el-form-item>
                <!--新增密码-->
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="userFormData.password" autocomplete="off"></el-input>
                </el-form-item>
                <!--新增昵称-->
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="userFormData.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <!--新增邮箱-->
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="userFormData.email" autocomplete="off"></el-input>
                </el-form-item>
                <!--新增手机号-->
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="userFormData.phone" autocomplete="off"></el-input>
                </el-form-item>
                <!--新增role-->
                <el-form-item label="role" :label-width="formLabelWidth">
                    <el-select v-model="userFormData.role" placeholder="请选择">
                        <el-option v-for="item in roleType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--新增avatar-->
                <el-form-item>
                    <el-form-item label="用户头像" :label-width="formLabelWidth">
                        <el-upload class="avatar-uploader" action="http://localhost:8080/Manage/fileup"
                                   :show-file-list="false" :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload" style="width: 150px ;height :150px">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <!--新增用户的取消/确定按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertUser">确 定</el-button>
            </div>
        </el-dialog>
        <!--展示用户信息-->
        <el-table :data="userList" style="width: 100%">
            <!--展示ID-->
            <el-table-column prop="id" label="ID" width="150" align="center"></el-table-column>
            <!--展示用户名-->
            <el-table-column prop="username" label="用户名" width="150" align="center"></el-table-column>
            <!--展示密码-->
            <el-table-column prop="password" label="密码" width="150" align="center"></el-table-column>
            <!--展示昵称-->
            <el-table-column prop="nickname" label="昵称" width="150" align="center"></el-table-column>
            <!--展示邮箱-->
            <el-table-column prop="email" label="邮箱" width="160" align="center"></el-table-column>
            <!--展示手机号-->
            <el-table-column prop="phone" label="手机号" width="160" align="center"></el-table-column>
            <!--展示role-->
            <el-table-column prop="role" label="role" width="160" align="center"></el-table-column>
            <!--展示头像-->
            <el-table-column prop="avatar" label="头像" width="150" align="center">
                <template slot-scope="scope">
                    <div class="img-container" @click="showImage(scope.row.avatar)">
                        <img :src="scope.row.avatar"/>
                    </div>
                </template>
            </el-table-column>
            <!--修改/删除的按钮-->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="updateCourse(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--修改用户信息标题-->
        <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible2">
            <el-form :model="userFormData2">
                <!--修改用户名-->
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="userFormData2.username" autocomplete="off"></el-input>
                </el-form-item>
                <!--修改密码-->
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="userFormData2.password" autocomplete="off"></el-input>
                </el-form-item>
                <!--修改昵称-->
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="userFormData2.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <!--修改邮箱-->
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="userFormData2.email" autocomplete="off"></el-input>
                </el-form-item>
                <!--修改手机号-->
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="userFormData2.phone" autocomplete="off"></el-input>
                </el-form-item>
                <!--修改role-->
                <el-form-item label="role" :label-width="formLabelWidth">
                    <el-select v-model="userFormData2.role" placeholder="请选择">
                        <el-option v-for="item in roleType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--修改头像-->
                <el-form-item>
                    <el-form-item label="用户头像" :label-width="formLabelWidth">
                        <el-upload class="avatar-uploader" action="http://localhost:8080/course/fileup"
                                   :show-file-list="false" :on-success="handleAvatarSuccess2"
                                   :before-upload="beforeAvatarUpload2" style="width: 150px ;height :150px">
                            <img v-if="userFormData2.avatar" :src="userFormData2.avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <!--修改用户的取消/确定按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="updateUser">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 查看头像大图 -->
        <el-dialog :visible.sync="dialogVisible" width="30%">
            <img :src="currentImage" alt="大图" style="width: 100%;"/>
            <span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button></span>
        </el-dialog>
        <!--分页-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[5,10, 20, 30, 50]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userList: [],
                userFormData: {
                    username: "",
                    password: "",
                    nickname: "",
                    email: "",
                    phone: "",
                    role: "",
                    avatar: "",
                },
                userFormData2: {},
                roleType: [
                    {id: 1, name: "管理员"},
                    {id: 2, name: "心理咨询师"},
                    {id: 3, name: "普通用户"}
                ],
                dialogFormVisible: false,//添加
                dialogFormVisible2: false,//修改
                dialogVisible: false, // 控制模态框的显示
                currentImage: '', // 当前显示的大图 URL
                formLabelWidth: '120px',
                imageUrl: "",
                totalCount: 0, // 总记录数
                pageSize: 5, // 每页显示的记录数
                currentPage: 1, // 当前页码
                username: '',///////////////////////////////////////////////
            };
        },
        methods: {
            //获取所有user
            getUser() {
                this.axios.get(`/Manage/select?pageNo=${this.currentPage}&pageSize=${this.pageSize}`).then((res) => {
                    console.log(res)
                    this.userList = res.data.data.list; // 修改为正确的字段
                    this.totalCount = res.data.data.total;
                    console.log(this.roleType);
                }).catch(err => {
                    console.log("错误");
                });
            },
            //添加用户
            insertUser() {
                this.axios.post('/Manage/insert', {
                    username: this.userFormData.username,
                    password: this.userFormData.password,
                    nickname: this.userFormData.nickname,
                    email: this.userFormData.email,
                    phone: this.userFormData.phone,
                    role: this.userFormData.role,
                    avatar: this.userFormData.avatar,
                }).then((res) => {
                    if (res.data != null) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success',
                            duration: 2000 // 2秒后自动消失
                        });
                    } else {
                        this.$message({
                            message: '提交失败，请重试！',
                            type: 'error',
                            duration: 2000 // 2秒后自动消失
                        });
                    }
                    console.log(res)
                    this.getUser();
                }).catch(err => {
                })
                this.dialogFormVisible = false;
            },
            //删除用户
            deleteUser(index) {
                console.log("index:" + index)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete(`/Manage/delete?id=${index}`).then(response => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getUser();
                    }).catch(error => {
                        this.$message.error('删除失败，请重试'); // 处理删除失败的情况
                        console.error('删除失败', error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改操作
            updateUser() {
                this.axios.put('Manage/update', null, {
                    params: {
                        id: this.userFormData2.id,
                        username: this.userFormData2.username,
                        password: this.userFormData2.password,
                        nickname: this.userFormData2.nickname,
                        email: this.userFormData2.email,
                        phone: this.userFormData2.phone,
                        role: this.userFormData2.role,
                        avatar: this.userFormData2.avatar,
                    }
                }).then((res) => {
                    if (res.data != null) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success',
                            duration: 2000 // 2秒后自动消失
                        });
                    } else {
                        this.$message({
                            message: '提交失败，请重试！',
                            type: 'error',
                            duration: 2000 // 2秒后自动消失
                        });
                    }
                    console.log(res)
                    this.getUser();
                }).catch(err => {
                })
                this.dialogFormVisible2 = false;
            },
            search() {
                this.axios.get("/Manage/selectlike", {
                    params: {
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                        username: this.username,
                    }
                }).then(res => {
                    this.userList = res.data.data.list; // 修改为正确的字段
                    console.log(this.userList)
                    this.totalCount = res.data.data.total;
                }).catch(err => {
                    "错误"
                })
            },
            // 返回图片的地址
            handleAvatarSuccess(res, file) {
                this.userFormData.avatar = "http://localhost:8080/Manage/downImg?file=" + file.response.data
                console.log(this.userFormData.avatar);
            },
            beforeAvatarUpload(file) {
                this.imageUrl = URL.createObjectURL(file);
            },
            // 修改图片
            handleAvatarSuccess2(res, file) {
                this.userFormData2.avatar = "http://localhost:8080/Manage/downImg?file=" + file.response.data
            },
            beforeAvatarUpload2(file) {
                this.imageUrl = URL.createObjectURL(file);
            },
            //点击图片,显示大图效果
            showImage(imageUrl) {
                console.log("Image clicked:", imageUrl);
                this.currentImage = imageUrl; // 设置当前图片 URL
                this.dialogVisible = true; // 打开模态框
            },
            openModal() {
                this.dialogFormVisible = !this.dialogFormVisible;
            },
            //切换每页的条数
            handleSizeChange(size) {
                this.pageSize = size;
                // 可以在这里重新获取数据
                this.search();
            },
            //切换页数
            handleCurrentChange(page) {
                this.currentPage = page;
                this.search();
            },
            //修改数据回显
            updateCourse(data) {
                this.dialogFormVisible2 = true;
                console.log(data)
                this.userFormData2 = data;
            },
        },
        created() {
            this.getUser();
        },
    }
</script>

<style scoped>
    .img-container {
        width: 70px;
        height: 70px;
        position: relative;
        border-radius: 20%;
    }

    .img-container > img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: cover;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20%;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .img-container {
        width: 100px; /* 固定宽度 */
        height: 100px; /* 固定高度 */
        position: relative;
        border-radius: 20%;
        overflow: hidden; /* 确保超出部分被隐藏 */
        cursor: pointer; /* 鼠标悬停时显示为手型 */
    }

    .img-container > img {
        width: 100%; /* 使图片宽度适应容器 */
        height: 100%; /* 使图片高度适应容器 */
        object-fit: cover; /* 保持图片比例并填充容器 */
    }

    .shuru {
        width: 200px;
        height: 36px;
        padding: 0 15px;
    }

    .input {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        margin-bottom: 10px;
    }
</style>